/*
 * @Description: step2-备注栏
 * @Author: ziwei.ma
 * @Date: 2019-07-11 17:18:41
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-07-31 17:30:39
 */

<template>
  <div class="remark-column-warpper flex-v">
    <!-- 两个点 -->
    <div class="flex-h flex-vc flex-hsb">
      <div class="dot baseBgColorNoActive"></div>
      <div class="dot baseBgColorNoActive"></div>
    </div>
    <!-- 备注输入框 -->
    <div class="remark-column flex-h">
      <textarea
        class="input-box fontsize32"
        maxlength="200"
        placeholder="备注"
        v-model="textContent"
        readonly="true"
        @click="clickRemark"
      ></textarea>
      <div class="word-count fontsize28">{{textNumber}}/200</div>
    </div>
  </div>
</template>

<script>
export default {
  components: {
  },
  data() {
    return {

    }
  },
  props: {

  },
  computed: {
    textNumber() {
      return this.textNum ? this.textNum : 0
    },
    textContent() {
      return this.$store.getters.remark
    },
    textNum() {
      return this.textContent.length
    }
  },
  methods: {
    clickRemark() {
      this.$emit('clickRemark')
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
.remark-column-warpper {
  width: 650px;
  height: 324px;
  border-radius: 8px;
  background-color: #fff;
  padding: 20px 18px 32px;
  margin-bottom: 32px;
}
.dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin: 0 30px;
}
.remark-column {
  position: relative;
  width: 614px;
  height: 208px;
  margin: 32px 0;
  border-radius: 8px;
  background-color: #f9f9f9;
  padding: 16px;
}
.input-box {
  width: 614px;
  height: 168px;
  border: none;
  resize: none;
  background: transparent;
}
.word-count {
  position: absolute;
  bottom: 10px;
  right: 16px;
  color: #999999;
}
</style>
